<template>
  <div class="info m-t">
    <div class="bg-white">
      <a class="mint-cell" @click="show.showAirport=true">  
        <div class="mint-cell-wrapper">
          <div class="mint-cell-title">
            <span class="mint-cell-text">机场</span>
          </div> 
          <div class="mint-cell-value is-link">
            <span>{{data.airport?data.airport.airPortName:'请选择'}}</span>
          </div>
        </div>
        <i class="mint-cell-allow-right"></i>
      </a>
      <a class="mint-cell" @click="showTerminalFn">  
        <div class="mint-cell-wrapper">
          <div class="mint-cell-title">
            <span class="mint-cell-text">航站楼</span>
          </div> 
          <div class="mint-cell-value is-link">
            <span>{{data.terminal?data.terminal.name:'请选择'}}</span>
          </div>
        </div>
        <i class="mint-cell-allow-right"></i>
      </a>

      <mt-cell title="航班号">
        <input type="text" v-model="data.flightNum" pattern="[0-9]\*" @input="flightNumChange()" @blur="flightNumBlur()" placeholder="请输入航班号">
      </mt-cell>

      <a class="mint-cell" @click="ifChooseT()">  
        <div class="mint-cell-wrapper">
          <div class="mint-cell-title">
            <span class="mint-cell-text">航班类型</span>
          </div> 
          <div class="mint-cell-value is-link">
            <span>{{data.airportType?data.airportType.value:'请选择'}}</span>
          </div>
        </div>
        <i class="mint-cell-allow-right"></i>
      </a>

      <!-- <a class="mint-cell" @click="openDatePicker()">   -->
      <a class="mint-cell time-picker">  
        <div class="mint-cell-wrapper">
          <div class="mint-cell-title">
            <span class="mint-cell-text">服务时间</span>
          </div> 
          <div class="mint-cell-value is-link rel">
            <input type="datetime-local" v-model="data.serviceTime" name="user_date" style="    opacity: 0;" class="abs" placeholder="请填写时间" />
            <span>{{data.serviceTime?data.serviceTime:'请选择'}}</span>
          </div>
        </div>
        <i class="mint-cell-allow-right"></i>
      </a>
    </div>
    <!-- 礼宾服务价格 -->
    <div class="protocol-price bg-white m-t p-l p-r p-t">
      <div class="inner-wrap">
        <div class="inner clearfix">
          <span class="l">礼宾服务</span>
          <span class="r" v-if="data.airportType&&data.inOrOut!=''">￥{{data.airportType.price}}</span>
        </div>
      </div>
    </div>

    <!-- 机场 -->
    <div class="t-mask" v-if="show.showAirport" @click="show.showAirport=false">
      <ul class="bg-white abs picker-wrap">
        <li @click="data.airport=item" v-for="item in dataInfo.airportInfo">{{item.airPortName}}</li>
      </ul>
    </div>
    <!-- 航站楼 -->
    <!-- <div class="t-mask" v-if="show.showTerminal" @click="show.showTerminal=false">
      <ul class="bg-white abs picker-wrap">
        <li @click="data.terminal=item" v-for="item in dataInfo.terminalInfo">{{item.name}}</li>
      </ul>
    </div> -->
    <div class="v-modal" v-if="show.showTerminal" @click="showTerminalFn"></div>
    <mt-picker v-if="show.showTerminal" :slots="terminalData" :valueKey="'name'" :showToolbar='true' @change='terminalChange' class="bg-white terminal-picker fixed">
      <span class="mint-datetime-action mint-datetime-cancel" @click="showTerminalFn">取消</span>
      <span class="mint-datetime-action mint-datetime-confirm" @click="confirmTerminal">确定</span>
    </mt-picker>

    <!-- 航班类型 -->
    <!-- <div class="t-mask" v-if="show.showAirportType" @click="show.showAirportType=false">
      <ul class="bg-white abs picker-wrap">
        <li @click="data.airportType=item" v-for="item in dataInfo.flightTypeList">{{item.value}}</li>
      </ul>
    </div> -->
    <div class="v-modal" v-if="show.showAirportType" @click="showAirportTypeFn"></div>
    <mt-picker v-if="show.showAirportType" :slots="flightTypeData" :valueKey="'value'" :showToolbar='true' @change='flightTypeChange' class="bg-white terminal-picker fixed">
      <span class="mint-datetime-action mint-datetime-cancel" @click="showAirportTypeFn">取消</span>
      <span class="mint-datetime-action mint-datetime-confirm" @click="confirmFlightType">确定</span>
    </mt-picker>

    <!-- <div class="t-mask" v-if="show.showDatePicker" @click="showDatePicker" id="datePicker"></div>
    <mt-datetime-picker :startDate="startDate" :endDate="endDate" @:touchstart = 'touchFunction'
      ref="datePicker"
      year-format="{value} 年"
      month-format="{value} 月"
      date-format="{value} 日"
      hour-format="{value} 时"
      minute-format="{value} 分"
      type="datetime"
      @confirm="timeConfirm">
    </mt-datetime-picker> -->
  </div>
</template>

<script>
  import axios from 'axios'
  import { Toast } from 'mint-ui'
  import moment from 'moment'
  import {mapGetters, mapActions} from 'vuex'
  export default {
    name: 'info',
    props: {
      data: '',
      type: ''
    },
    computed: {
      // 映射State
      ...mapGetters([
        'noScrollFlag'
      ])
    },
    data () {
      return {
        show: {
          showAirport: false,
          showTerminal: false,
          showFlightNum: false,
          showServiceTime: false,
          showAirportType: false,
          showDatePicker: false
        },
        dataInfo: {
          airportInfo: '',
          terminalInfo: '',
          flightTypeList: []
        },
        terminalData: [{}],
        flightTypeData: [{}],
        airportId: '',
        inOut: '',
        airType: 0,
        startDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 1, new Date().getHours(), new Date().getMinutes()),
        endDate: new Date(new Date().getFullYear() + 1, new Date().getMonth(), new Date().getDate()),
        terminalVal: {},
        flightTypeVal: {}
      }
    },
    mounted () {
      this.inOut = (this.type === 'receive') ? 0 : 1
      axios.post('/reception/api/airportservice/getAirPortList',
        require('qs').stringify({})
      ).then((res) => {
        if (res.data.msg.code === '9999') {
          this.dataInfo.airportInfo = res.data.data
          this.data.airport = this.dataInfo.airportInfo[0]
          this.airportId = this.dataInfo.airportInfo[0].id
          this.getTerminalList(this.dataInfo.airportInfo[0].id)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    methods: {
      ...mapActions([
        'noScrollFn'
      ]),
      showTerminalFn () {
        this.show.showTerminal = !this.show.showTerminal
        this.noScrollFn(this.show.showTerminal)
      },
      showAirportTypeFn () {
        this.show.showAirportType = !this.show.showAirportType
        this.noScrollFn(this.show.showAirportType)
      },
      timeCancle () {
        alert(123)
      },
      touchFunction (ev) {
        console.log('1')
        ev.preventDefault()
      },
      openDatePicker () {
        this.$refs.datePicker.open()
        this.show.showDatePicker = true
        // document.getElementById('datePicker').addEventListener('touchstart', this.touchFunction)picker-items
        document.getElementsByClassName('picker-items')[0].addEventListener('touchstart', this.touchFunction)
      },
      showDatePicker () {
        this.$refs.datePicker.close()
        this.show.showDatePicker = false
      },
      flightNumChange () {
        this.data.flightNum = this.data.flightNum.substring(0, 10)
        if (!(/^[A-Za-z0-9]{0,10}$/.test(this.data.flightNum))) {
          Toast({
            message: '请输入10位英文和数字的航班号',
            position: 'center',
            duration: 500
          })
          this.data.flightNum = ''
          return false
        }
      },
      flightNumBlur () {
        this.data.flightNum = this.data.flightNum.toUpperCase()
      },
      // 检测是否选择过航站楼
      ifChooseT () {
        if (this.data.terminal) {
          this.show.showAirportType = !this.show.showAirportType
        } else {
          Toast({
            message: '请先选择航站楼',
            position: 'center',
            duration: 500
          })
          return false
        }
        this.noScrollFn(this.show.showAirportType)
      },
      timeConfirm (val) {
        var y = new Date(val).getFullYear()
        var m = (new Date(val).getMonth() + 1)
        var d = new Date(val).getDate()
        var h = (new Date(val).getHours() < 10) ? '0' + (new Date(val).getHours()) : (new Date(val).getHours())
        var mm = (new Date(val).getMinutes() < 10) ? '0' + (new Date(val).getMinutes()) : (new Date(val).getMinutes())
        // var s = new Date(val).getSeconds()
        this.data.serviceTime = y + '年' + m + '月' + d + '日  ' + h + ':' + mm + ':00'
        this.show.showDatePicker = false
      },
      // 排序
      sortBy (filed, rev, primer) {
        rev = (rev) ? -1 : 1
        return function (a, b) {
          a = a[filed]
          b = b[filed]
          if (typeof (primer) !== 'undefined') {
            a = primer(a)
            b = primer(b)
          }
          if (a < b) { return rev * -1 }
          if (a > b) { return rev * 1 }
          return 1
        }
      },
      // 获取航站楼
      getTerminalList (airportId) {
        axios.post('/reception/api/airportservice/getTerminalList',
          require('qs').stringify({airportId: airportId, type: this.airType, inOut: this.inOut})
        ).then((res) => {
          this.dataInfo.terminalInfo = res.data.data.terminalList
          this.dataInfo.terminalInfo = this.dataInfo.terminalInfo.sort(this.sortBy('id', false, parseInt))
          var terminalList = []
          this.dataInfo.terminalInfo.forEach((val, key) => {
            terminalList.push(val.id + ',' + val.name)
          })
          this.terminalData = [
            {
              flex: 1,
              defaultIndex: 1,
              values: this.dataInfo.terminalInfo,
              className: 'picker',
              textAlign: 'center'
            }
          ]
        }).catch(err => {
          console.log(err)
        })
      },
      // 获取航班类型
      getFlightTypeList (obj) {
        this.dataInfo.flightTypeList = []
        axios.post('/reception/api/airportservice/getFlightTypeList',
          require('qs').stringify({airportId: obj.airportId, type: this.airType, inOut: this.inOut, name: obj.name})
        ).then((res) => {
          // this.dataInfo.flightTypeList = res.data.data.listFlightType
          res.data.data.sort(this.sortBy('flightType', false, parseInt))
          res.data.data.forEach((val, index) => {
            // 航班类型（1:国内航班 2:国际航班 3:国内+国际）
            var value = ''
            if (Number(val.flightType) === 1) {
              value = '国内航班'
            } else if (Number(val.flightType) === 2) {
              value = '国际航班'
            } else if (Number(val.flightType) === 3) {
              value = '国内+国际'
            }
            var newObj = val
            newObj.value = value
            this.dataInfo.flightTypeList.push(newObj)
            this.flightTypeData = [
              {
                flex: 1,
                defaultIndex: 1,
                values: this.dataInfo.flightTypeList,
                className: 'picker',
                textAlign: 'center'
              }
            ]
          })
        }).catch(err => {
          console.log(err)
        })
      },
      // 选航站楼时，触发的函数
      terminalChange (picker, values) {
        this.terminalVal = values[0]
      },
      // 确定航站楼
      confirmTerminal () {
        if (this.terminalVal) {
          this.data.terminal = this.terminalVal
        } else {
          if (this.dataInfo.terminalInfo.length > 2) {
            this.data.terminal = this.dataInfo.terminalInfo[2]
          } else {
            Toast({ message: '请选择航站楼', duration: 1000 })
            return
          }
        }
        this.show.showTerminal = !this.show.showTerminal
        this.noScrollFn(this.show.showTerminal)
      },
      // 选航班号时，触发的函数
      flightTypeChange (picker, values) {
        this.flightTypeVal = values[0]
      },
      // 确认航班类型
      confirmFlightType () {
        if (this.flightTypeVal) {
          this.data.airportType = this.flightTypeVal
        } else {
          if (this.dataInfo.flightTypeList.length > 2) {
            this.data.airportType = this.dataInfo.terminalInfo[2]
          } else {
            Toast({ message: '请选择航班类型', duration: 1000 })
            return
          }
        }
        this.show.showAirportType = !this.show.showAirportType
        this.noScrollFn(this.show.showAirportType)
      }
    },
    watch: {
      // 航站楼切换，则调用航班类型接口,航班类型为空
      'data.terminal' (newVal, oldVal) {
        this.data.airportType = ''
        this.getFlightTypeList({airportId: this.airportId, name: newVal.name})
      },
      // 航班类型切换
      'data.airportType' (newVal, oldVal) {
        if (newVal) {
          if (Number(newVal.flightType) === 1) {
            this.data.inOrOut = 'in'
          } else if (Number(newVal.flightType) === 2) {
            this.data.inOrOut = 'out'
          }
        } else {
          this.data.inOrOut = ''
        }
      },
      'data.serviceTime' () {
        if (this.data.serviceTime.indexOf('T') > -1) {
          let time = moment(this.data.serviceTime).format('YYYY-MM-DD HH:mm:ss')
          let timeStart = moment().add(1, 'days').format('YYYY-MM-DD HH:mm:ss')
          let timeEnd = moment().add(6, 'months').format('YYYY-MM-DD HH:mm:ss')
          // alert(time + '*' + timeStart + '*' + timeEnd)
          if (time < timeStart) {
            Toast({ message: '请至少提前1天预约服务', duration: 1000 })
            this.data.serviceTime = ''
          } else if (time > timeEnd) {
            Toast({ message: '请选择未来6个月以内的服务时间', duration: 1000 })
            this.data.serviceTime = ''
          } else if (time >= timeStart && time <= timeEnd) {
            this.data.serviceTime = time
          }
        }
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less'>
  @import '../../assets/less/border.less';
  .info {
    font-size: 0.28rem;
    .mint-datetime-cancel {
      color: #666;
    }
    .mint-datetime-confirm {
      color: #cdad66;
    }
    .picker-slot{
      font-size: 0.28rem;
    }
    .time-picker{
      .mint-cell-value{
        height:0.6rem;
        margin-top:2px;
        span{
          height:0.6rem;
          line-height:0.6rem;
          text-align: right;
          word-break: break-all;
        }
      }
    }
    .protocol-price .inner-wrap{
      line-height: 0.6rem;
      font-size: 0.3rem;
      font-weight: bold;
      color: #333;
      .onepx-border-bottom(#d8d8d8);
    }
    .mint-field .mint-cell-title{
      text-align: right;
    }
    .mint-field-core{
      .onepx-border-all(#d8d8d8)
    }
    .mint-datetime-action{
      width: 26%;
    }
    .picker-items{
      padding: 0 1.2rem;
    }
    .picker-item{
      padding: 0;
    }
    .t-mask{
      z-index: 2001;
      .picker-wrap{
        width: 100%;
        bottom: 0;
        text-align: center;
        line-height: 0.6rem;
        box-sizing: border-box;
        padding:1.6rem 0
      }
    }
    .mint-cell{
      min-height: 0.8rem;
      .mint-cell-wrapper{
        font-size: 0.28rem;
        .mint-cell-value{
          input{
            text-align: right;
            height: 100%;
            border: 0;
            margin-right: 0.2rem;
          }
        }
      }
    }
    .mint-datetime-action{
      font-size: 0.28rem;
    }
    .terminal-picker{
      width: 100%;
      z-index: 999;
      bottom: 0;
    }
  }
</style>
